import React, { useRef } from 'react';
import { SuperTable, SuperTableProps } from '@/components/SuperTable';
import { Menu } from '@/types/sys-type';
import { factory } from '@/utils/column';
import { Button, Divider, Flex, Form } from 'antd';
import { ProFormInstance } from '@ant-design/pro-form';
import {
  CloudDownloadOutlined,
  CloudUploadOutlined,
  ExportOutlined,
  ImportOutlined,
  MinusCircleTwoTone, PlusCircleTwoTone,
} from '@ant-design/icons';
import { loginStorage } from '@/pages/user/login/service';
import { Storage } from '@/utils/storage';
import { IconFontSelect, loader } from '@/components/IconFontSelect';

export default () => {
  const columns: SuperTableProps<Menu, any>['columns'] = [
    ... factory.getAbstractIdBaseEntityColumns() as any,
    { dataIndex: 'name', title: '名称', width: 200 },
    { dataIndex: 'code', title: '代码', width: 200, },
    {
      dataIndex: 'menuType', title: '类型', width: 200, valueType: 'select', valueEnum: {
        'dir': { text: '目录' },
        'menu': { text: '菜单' },
      },
    },
    { dataIndex: 'url', title: '地址', width: 200, hideInSearch: true },
    { dataIndex: 'icon', title: '图标', width: 100, hideInSearch: true },
    {
      dataIndex: 'externalLink', title: '是否外链', width: 100, valueType: 'radio', valueEnum: {
        true: { text: '是' },
        false: { text: '否' },
      },
    },
    { dataIndex: 'describe', title: '描述', valueType: 'text', hideInSearch: true, width: 300, ellipsis: true },
  ];

  const formRef = useRef<ProFormInstance>();

  return <SuperTable
    columns={ columns }
    toolBarRender={
      () => {
        return [ <Button>privat11111111111e</Button> ];
      }
    }
    scroll={ { x: true } }
    // options={false}
    // optionsRender={() => {
    //   return [<a>x</a>]
    // }}
    // searchFormRender={
    //   (p, pp) => {
    //     console.log(p, pp);
    //     return <a>搜索表单</a>;
    //   }
    // }
    formRef={ formRef }
    request={ () => {
      return Promise.resolve({
        success: true,
        data: [
          { id: '1', url: 'http://localhost:8000/sys/menu' },
          {
            id: '2',
            name: '一级菜单',
            url: 'https://github.com/ant-design/ant-design',
            describe: '这是一个描述',
            children: [
              { id: '3', name: '二级菜单', url: 'http://localhost:8000/sys/menu' },
            ],
          },
        ],
      });
    } }
    onRow={
      (data, index) => {
        return {
          onClick: (e) => {
            console.log('单机行', data, index)
          }
        }
      }
    }
    rowSelection={
      {
        hideSelectAll: true,
        renderCell: (a, b, c, dom) => <Flex gap='small'>
          <Button type="primary">renderCell</Button>
          { dom }
        </Flex>,
      }
    }
    expandable={
      {
        // expandedRowRender: record => {
        //   if (loginStorage instanceof Storage) {
        //     console.log(record);
        //   }
        //   return <p style={ { margin: 0 } }>{ record.name }</p>;
        // },
        expandIcon: ({ expanded, onExpand, record, expandable }) => {
          if (record?.children?.length > 0) {
            return expanded ? (
              <MinusCircleTwoTone onClick={ e => {
                e.stopPropagation();
                onExpand(record, e);
              } } />
            ) : (
              <PlusCircleTwoTone onClick={ e => {
                e.stopPropagation();
                onExpand(record, e);
              } } />
            );
          }
        },
        columnTitle: '测试展开',
        // childrenColumnName: 'children',
        fixed: 'right',
        expandRowByClick: true,
        rowExpandable: (record) => {
          return record && record?.children && record?.children.length > 0;
        },
      }
    }
    // tableExtraRender={() => <a>extra</a>}
    toolbar={
      {
        title: <Flex gap="small">
          <Button type="primary">新增</Button>
          <Button type="primary" danger>删除</Button>
          {loader.find('iconfont:icon-icon-vmversion11')}
          <IconFontSelect />
        </Flex>,
        // style: {
        //   border: 'solid 1px red',
        // },
        // search: {
        //   onSearch: (searchValue) => {
        //     console.log(searchValue);
        //     return Promise.resolve();
        //   },
        //   // style: {
        //   //   width: 700,
        //   // },
        // },
        // onSearch: (kw) => {
        //   console.log(kw);
        // },
        // settings: [<a>sett</a>],
        // actions: [<a>action</a>]
        actions: [
          <Button type="primary">新增</Button>,
          <Button type="primary" danger>删除</Button>,
          <Button
            type="link" icon={ <ImportOutlined /> }
            onClick={
              () => {
                console.log(formRef.current?.getFieldsValue());
              }
            }
          />,
          <Button
            type="link" icon={ <ExportOutlined /> }
            onClick={
              () => {
                console.log(formRef.current?.getFieldsValue());
              }
            }
          />,
          <Divider type="vertical" />,
        ],
      }
    }
  />;
}
